<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@include file="/static/common/taglib.jsp" %>
<%@include file="../../public/commonJs.jsp" %>
<%@include file="../../public/commonCss.jsp" %>
<div id="wrapper" ms-controller="main" class="ms-controller">
    <div class="boxmain whiteBox lrbox" style="margin-top: -145px;overflow: auto">
        <div class="layui-form" style="padding: 20px;">
            <blockquote class="layui-elem-quote">
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 220px">
                        当前工序生效日期：
                        <span style="color: red">{{train.validDateShow}}</span>
                    </label>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 250px"><span class="fontRed">*</span>上次修改日期：
                        <span style="color: red">{{train.modifyTime}}</span>
                    </label>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" id="validDate" class="layui-input Wdate"
                               placeholder="为空即时生效"
                               ms-duplex="train.validDate"
                               onClick="WdatePicker({minDate:'%y-%M-{%d+1}'})"/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-inline">
                        <button class="layui-btn" onclick="saveOrUpdate()">保存</button>
                        <button class="layui-btn layui-btn-primary" onclick="closeIframe()">取消</button>
                    </div>
                </div>
            </blockquote>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label"><span class="fontRed">*</span>车次：</label>
                    <div class="layui-input-inline">
                        <input type="text" ms-duplex="train.code" class="layui-input" placeholder="请输入车次">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label"><span class="fontRed">*</span>始发站：</label>
                    <div class="layui-input-inline">
                        <input type="text" ms-duplex="train.startCity" class="layui-input" placeholder="请输入始发站">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label"><span class="fontRed">*</span>终点站：</label>
                    <div class="layui-input-inline">
                        <input type="text" ms-duplex="train.endCity" class="layui-input" placeholder="请输入终点站">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label"><span class="fontRed">*</span>开始时间：</label>
                    <div class="layui-input-inline">
                        <input type="time" ms-duplex="train.startTime" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label"><span class="fontRed">*</span>结束时间：</label>
                    <div class="layui-input-inline">
                        <input type="time" ms-duplex="train.endTime" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="fl" style="width: 70%;height: 80%;overflow: auto">
                <div class="fl" style="width: 40%">
                    <table class="layui-table">
                        <thead>
                        <tr align="center">
                            <th colspan="6"><span style="font-size: 16px;color: #000">车次站点</span></th>
                        </tr>
                        <tr align="center">
                            <th>行号</th>
                            <th>站点名称</th>
                            <th>到达时间</th>
                            <th>离开时间</th>
                            <th>停留时间</th>
                        </tr>
                        </thead>
                        <tbody align="center">
                        <tr height="39px" ms-repeat="train.trainStations">
                            <td>{{$index+1}}</td>
                            <td>{{el.name}}</td>
                            <td>{{el.arriveTime}}</td>
                            <td>{{el.departTime}}</td>
                            <td>{{el.stopTime}}分钟</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="fl" style="width: 57%;margin-left: 15px;">
                    <table class="layui-table">
                        <thead>
                        <tr align="center">
                            <th colspan="6"><span style="font-size: 16px;color: #000">工序列表</span></th>
                        </tr>
                        <tr align="center">
                            <th>行号</th>
                            <th>工序编号</th>
                            <th>工序名称</th>
                            <th>开始时间</th>
                            <th>结束时间</th>
                            <th>删除</th>
                        </tr>
                        </thead>
                        <tbody align="center">
                        <tr ms-repeat="train.trainWorks">
                            <td>{{$index+1}}</td>
                            <td>{{el.workId}}</td>
                            <td>{{el.workName}}</td>
                            <td>
                                <input type="time" ms-duplex="el.startTime" class="layui-input">
                            </td>
                            <td>
                                <input type="time" ms-duplex="el.endTime" class="layui-input"
                                       ms-on-change="change(el,$index)">
                            </td>
                            <td><a href="javascript:;" class="operate del" ms-on-click="$remove" title="删除"></a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="fr" style="width: 30%;height: 80%;overflow: auto">
                <table class="layui-table ">
                    <thead>
                    <tr align="center">
                        <th colspan="3"><span style="font-size: 16px;color: #000">选择工序</span></th>
                    </tr>
                    <tr align="center">
                        <th>工序编号</th>
                        <th>工序名称</th>
                        <th>选择</th>
                    </tr>
                    </thead>
                    <tbody align="center">
                    <tr ms-repeat="workDatas">
                        <td>{{el.id}}</td>
                        <td>{{el.name}}</td>
                        <td>
                            <button class="button" ms-on-click="selectThis(el)">选择</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var vm;
    $(function () {
        vm = avalon.define({
            $id: "main",
            workDatas: [],//工序数据
            trainTypes: [],
            trainCode: '',//车型代号
            trainId: '${id}',
            train: {//车次
                id: '',
                code: '',
                startCity: '',
                endCity: '',
                startTime: '',
                endTime: '',
                validDate: '',
                trainWorks: [],
                trainStations: []
            },
            trainWork: {//车次工序
                trainId: '',
                workId: '',
                workName: '',
                startTime: '',
                endTime: '',
                startDay: 1,
                endDay: 1
            }
        });
        loadWorks();
        loadTrain();
    });
    var form = layui.form();

    //当输入框值改变时触发
    function change(el, index) {
        var len = vm.$model.train.trainWorks.length;
        var startTime = vm.$model.train.trainWorks[index + 1].startTime
        if ((index + 1) < len && startTime == '') {
            vm.train.trainWorks[index + 1].startTime = vm.$model.train.trainWorks[index].endTime;
        }
    }

    //查询
    function loadTrain() {
        if (vm.$model.trainId == "") {
            return;
        }
        $.ajax({
            type: 'post',
            url: '${ctx}/trainController/selectObjectById.action?id=' + vm.$model.trainId,
            data: "",
            dataType: "json",
            timeout: 10000,
            beforeSend: function () {
                layui.layer.msg('正在加载数据...', {
                    icon: 16,
                    shade: 0.01
                });
            },
            success: function (data) {
                closeDialog();
                if (data.code == 0) {
                    vm.train = data.data;
                } else {
                    layui.layer.msg('数据加载失败', {icon: 2});
                }

            }
        });
    }

    //加载工序数据
    function loadWorks() {
        $.ajax({
            type: 'post',
            url: '${ctx}/workController/selectAllWork.action?parentId=0&trainType=' + vm.$model.trainCode,
            data: "",
            dataType: "json",
            timeout: 10000,
            beforeSend: function () {
                layui.layer.msg('正在加载数据...', {
                    icon: 16,
                    shade: 0.01
                });
            },
            success: function (data) {
                closeDialog();
                if (data.code == 0) {
                    vm.workDatas = data.datas;
                } else if (data.code == -2) {
                    vm.workDatas = [];
                    layui.layer.msg('该车型没有工序，请在工序管理里面进行添加', {icon: 2});
                } else {
                    vm.workDatas = [];
                    layui.layer.msg('工序加载失败', {icon: 5});
                }

            }
        });
    }

    //选择
    function selectThis(el) {
        vm.trainWork.workId = el.id;
        vm.trainWork.workName = el.name;
        vm.train.trainWorks.push(vm.$model.trainWork);
    }

    //加载搜索数据
    function loadSearchData() {
        $.ajax({
            type: 'post',
            url: '${ctx}/codeController/selectAllCodeData.action?sysCode=cxgl',
            data: "",
            dataType: "json",
            timeout: 10000,
            success: function (data) {
                vm.trainTypes = data.data;
            }
        });
    }

    //保存或者更新
    function saveOrUpdate() {
        if (vm.$model.train.code == '' ||
            vm.$model.train.startCity == '' ||
            vm.$model.train.endCity == '' ||
            vm.$model.train.startTime == '' ||
            vm.$model.train.endTime == '') {
            layui.layer.msg('必填项不能为空', {icon: 2, anim: 6});
            return;
        }
        var arr = vm.train.trainWorks;
        if (arr.length > 0) {
            for (var i = 0; i < arr.length; i++) {
                if (arr[i].startTime == '' || arr[i].endTime == '') {
                    layui.layer.msg('工序时间不能为空', {icon: 2, anim: 6});
                    return;
                }
                var hour1 = parseInt(arr[i].startTime.substring(0, 2));
                var hour2 = parseInt(arr[i].endTime.substring(0, 2));
                if (hour1 == 0 || hour1 == 1) {
                    arr[i].startDay = 2;
                }
                if (hour2 == 0 || hour2 == 1) {
                    arr[i].endDay = 2;
                }
                if ((arr[i].endDay < arr[i].startDay) || (arr[i].endDay == arr[i].startDay && arr[i].endTime <= arr[i].startTime)) {
                    layui.layer.msg('工序结束时间必须大于开始时间', {icon: 2, anim: 6});
                    return;
                }
            }
        }

        var msg = '';
        if (vm.$model.train.validDate == '' || vm.$model.train.validDate == null) {
            msg = '你确定保存吗?此次保存将会即时生效'
        } else {
            msg = '你确定保存吗?此次保存将会在' + vm.$model.train.validDate + '生效';
        }
        layui.layer.alert(msg, {
            title: '提醒',
            btn: ['确定', '取消']
        }, function () {
            var dataStr = {trainStr: JSON.stringify(vm.$model.train)}
            closeDialog();
            $.ajax({
                type: 'post',
                url: '${ctx}/trainController/saveOrUpdate.action',
                data: dataStr,
                dataType: "json",
                beforeSend: function () {
                    layui.layer.msg('正在操作请稍后...', {
                        icon: 16,
                        shade: 0.01
                    });
                },
                timeout: 10000,
                success: function (data) {
                    if (data.code == 0) {
                        layui.layer.alert('保存成功', {//样式类名
                            closeBtn: 0
                        }, function () {
                            top.maincontab.reloadtabactive("车次管理");
                            closeIframe();
                        });
                    } else if (data.code == -2) {
                        layui.layer.msg('该车次已经存在！', {icon: 2, anim: 6});
                    } else {
                        layui.layer.msg('网络错误，保存失败！', {icon: 2, anim: 6});
                    }
                }
            });
        });

    }

    //取消
    function closeIframe() {
        if (vm.$model.trainId == "") {
            top.maincontab.closetab("新增车次");
        } else {
            top.maincontab.closetab("编辑车次");
        }
    }
</script>